<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div id="showTable" style="float: left; margin-top: 80px; margin-left: 60px;"></div><!-- 用来显示查询的结果 -->
	<div id="showMenu" style="float: left; margin-top: 120px; margin-left: 60px;"></div>
</body>
<script type="text/javascript">
	query();
	function query(){
		$.ajax({
			type:"post",//设置提交方式
			url:"${pageContext.request.contextPath}/servlet/QueryAllRoleServlet",
			async:true,//表示进行异步执行
			dataType:"json",//数据的返回类型
			//data:{roleName:roleName},
			success:function(data){//data就是成功之后 Servlet返回的结果
				var str = "<table border='1'><tr><th>角色名称</th></tr>";
				for(var i = 0;i<data.length;i++){
					str += "<tr><td><a href='#' onclick='queryMenu("+data[i].roleId+")'>"+data[i].roleName+"</a></td></tr>";
				}
				str += "</table>"; 
				$("#showTable").html(str);
			},
			error:function(err){
				alert("操作失败");
			}
		});
	}
	function queryAllMenu(){
		$.ajax({
			type:"post",//设置提交方式
			url:"${pageContext.request.contextPath}/servlet/QueryAllMenuServlet",
			async:true,//表示进行异步执行
			dataType:"json",//数据的返回类型
			//data:{roleName:roleName},
			success:function(data){//data就是成功之后 Servlet返回的结果
				var str = "<form name='f'><table><caption>查询角色拥有菜单</caption><tr>";
				for(var i = 1;i<data.length+1;i++){
					str += "<td><input type='checkbox' name='menuId' id='"+data[i-1].menuName+"' value='"+data[i-1].menuId+"'>"+data[i-1].menuName+"</td>";
					if(i%4==0){
						str += "</tr>";
					}
				}
				str += "</tr><tr height='60px'></tr><tr><td colspan='4' align='center'><div id='upd'></div></td></tr></table></form>" 
				$("#showMenu").html(str);
			},
			error:function(err){
				alert("操作失败");
			}
		});
	}
	function queryMenu(roleId){
		var roleId = roleId;
		queryAllMenu();
		$.ajax({
			type:"post",//设置提交方式
			url:"${pageContext.request.contextPath}/servlet/RoleMenuQueryServlet",
			async:true,//表示进行异步执行
			dataType:"json",//数据的返回类型
			data:{roleId:roleId},
			success:function(data){//data就是成功之后 Servlet返回的结果
				for(var i = 0;i<data.length;i++){
					$("input:checkbox[value='"+data[i].menuId+"']").attr('checked','true');
				}
				var str = "<input type='button' value='提交' onclick='doUpd("+roleId+")'>";
				$("#upd").html(str);
			},
			error:function(err){
				alert("操作失败");
			}
		});
	}
	function doUpd(roleId){
		var obj = document.getElementsByName("menuId");
	    var checkVal = [];
	    for(k in obj){
	        if(obj[k].checked)
	            checkVal.push(obj[k].value);
	    }
	    var menuId = checkVal.join(".");
		if(confirm("确认修改？")){
			$.ajax({
				type:"post",//设置提交方式
				url:"${pageContext.request.contextPath}/servlet/RoleMenuUpdServlet",
				async:true,//表示进行异步执行
				dataType:"json",//数据的返回类型
				data:{roleId:roleId,menuId:menuId},
				success:function(data){//data就是成功之后 Servlet返回的结果
					if(data[0].result){
						alert("修改成功！");
						query();
					}else{
						alert("修改失败");
					}
				},
				error:function(err){
					alert("操作失败");
				}
			});
		}
	}
</script>
</html>